<template>
  <div>
    <!-- 头部区域 -->
    <el-header>
      <p>万事达-TMS客户端</p>
      <div>
        <span class="iconfont icon-svg45-copy">⑧</span>
        <el-button type="info">退出系统</el-button>
      </div>
    </el-header>

    <!-- 标题区域 -->
    <el-row class="title">
      <el-col :span="24">
        <div>在途跟踪-异常上报</div>
      </el-col>
    </el-row>

    <!-- 货物信息 -->
    <div class="table_title">货物信息</div>
    <el-table :data="goods_info" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="order_num" label="订单号" align="center" width="115px"></el-table-column>
      <el-table-column prop="contract_num" label="合同编号" align="center" width="115px"></el-table-column>
      <el-table-column prop="waybill_num" label="运单号" align="center" width="115px"></el-table-column>
      <el-table-column prop="origin" label="始发地" align="center" width="115px"></el-table-column>
      <el-table-column prop="destination" label="目的地" align="center" width="115px"></el-table-column>
      <el-table-column prop="client_firm" label="委托方" align="center" width="115px"></el-table-column>
      <el-table-column prop="client_per" label="委托人" align="center" width="115px"></el-table-column>
      <el-table-column prop="client_phone" label="联系电话" align="center" width="115px"></el-table-column>
      <el-table-column prop="full_address" label="详细地址" align="center" width="115px"></el-table-column>
      <el-table-column prop="consignee_firm" label="收货方" align="center" width="115px"></el-table-column>
      <el-table-column prop="consignee_per" label="收货人" align="center" width="115px"></el-table-column>
      <el-table-column prop="consignee_phone" label="联系电话" align="center" width="115px"></el-table-column>
      <el-table-column prop="consignee_address" label="收货地址" align="center" width="115px"></el-table-column>
      <el-table-column prop="goods_name" label="货名" align="center" width="115px"></el-table-column>
      <el-table-column prop="goods_model" label="规格型号" align="center" width="115px"></el-table-column>
      <el-table-column prop="goods_total_package" label="总包装" align="center" width="115px"></el-table-column>
      <el-table-column prop="goods_total_quantity" label="总数量" align="center" width="115px"></el-table-column>
      <el-table-column prop="goods_total_weight" label="总重量kg" align="center" width="115px"></el-table-column>
      <el-table-column prop="goods_total_volume" label="总体积m³" align="center" width="115px"></el-table-column>
      <el-table-column prop="pickup_goods_per" label="提货联系人" align="center" width="115px"></el-table-column>
      <el-table-column prop="pickup_goods_phone" label="联系电话" align="center" width="115px"></el-table-column>
      <el-table-column prop="pickup_goods_address" label="提货地址" align="center" width="115px"></el-table-column>
      <el-table-column prop="order_mark" label="订单备注" align="center" width="115px"></el-table-column>
    </el-table>

    <!-- 附件 -->
    <div class="table_title">附件</div>
    <el-row class="upload_img">
      <el-col :span="12">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-col>
    </el-row>

    <!-- 异常原因 -->
    <div class="table_title"><span class="toRed">*</span>异常原因</div>
    <el-row>
      <el-col :span="12">
        <el-input class="textarea" type="textarea" :rows="6" v-model="abnormal_causes"> </el-input>
      </el-col>
    </el-row>

    <!-- 提交和返回 -->
    <el-row :gutter="15" class="sub_return">
      <el-col :span="8" class="sub_btn">
        <el-button type="warning">提交</el-button>
      </el-col>
      <el-col :span="12" class="return_btn">
        <el-button type="warning" @click="handleReturnPage">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 货物信息表
      goods_info: [
        {
          order_num: "XL18964566", // 订单号
          contract_num: "HTDKL86378", // 合同编号
          waybill_num: "XL18654566-a", // 运单号
          origin: "上海", // 始发地
          destination: "北京", // 目的地
          client_firm: "上海海棠科技有限公司", // 委托方
          client_per: "海棠", // 委托人
          client_phone: "18966669859", // 联系电话
          full_address: "上海市长虹区11街12栋302", // 详细地址
          consignee_firm: "北京百度科技有限公司", // 收货方
          consignee_per: "小李", // 收货人
          consignee_phone: "18756669875", // 联系电话
          consignee_address: "北京市朝阳区1街129栋6号仓库", // 收货地址
          goods_name: "白糖", // 货名
          goods_model: "1x0.8", // 规格型号
          goods_total_package: "袋", // 总包装
          goods_total_quantity: "3", // 总数量
          goods_total_weight: "300.00", // 总重量kg
          goods_total_volume: "3", // 总体积m³
          pickup_goods_per: "小李", // 提货联系人
          pickup_goods_phone: "18756669875", // 联系电话
          pickup_goods_address: "北京市朝阳区1街129栋6号仓库", // 提货地址
          order_mark: "干燥,防潮", // 订单备注
        },
      ],
      // 异常原因
      abnormal_causes: "",
      // 图片上传相关
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },

  methods: {
    // 返回上一页
    handleReturnPage() {
      this.$router.push("/transport/trackingcl");
    },
    // 图片上传相关
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-header {
  background-color: #99a9bf;
  color: #333;
  font-size: 24px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  div {
    span {
      margin: 30px;
      font-size: 28px;
    }
  }
}

.el-table {
  display: table-cell;
}
.table_title {
  height: 30px;
  width: 90px;
  background-color: #ccc;
  line-height: 30px;
  text-align: center;
  margin: 10px 0;
  border-radius: 3px;
  font-size: 12px;
}

.title {
  height: 30px;
  background-color: #d3dce6;
  line-height: 30px;
  margin-bottom: 5px;
  div {
    text-align: left;
    margin-left: 5px;
  }
}

.upload_img{
  text-align: left;
}

.sub_return {
  margin-top: 5px;
  .sub_btn {
    text-align: right;
  }
  .return_btn {
    text-align: left;
  }
}

.toRed{
  color: red;
}
</style>